<template>
  <div class="content">
    <Loading :loading="loading">
      <NavBar></NavBar>
      <div class="text">{{ count }}位客户近期生日</div>
      <div
        class="center flex-row"
        v-for="item in birthdayList"
        :key="item.index"
      >
        <div class="date">
          {{ item.birthday.replace(/(\d{4})\-(\d{2})\-(\d{2})/, '$2月$3日') }}
        </div>
        <div class="name">{{ item.chnName }}生日</div>
        <div class="card" @click="handleClick(item)">送贺卡</div>
      </div>
    </Loading>
  </div>
</template>
<script>
import API from '@/services/h5/my'
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      count: 0,
      list: [],
      birthdayList: [],
      date: '',
      loading: false
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    getCustomerList() {
      this.loading = true
      API.customerList().then(res => {
        if (res.data && res.data.code === 1000) {
          this.list = res.data.data
          this.count = this.list.filter(item => {
            return item.birthdayRemindFlag === 'Y'
          }).length
          this.birthdayList = this.list.filter(item => {
            return item.birthdayRemindFlag === 'Y'
          })
        }
        this.loading = false
      })
    },
    handleClick(item) {
      this.$router.push({
        path: `/birthday`,
        query: { birthdayImgUrl: item.birthdayImgUrl }
      })
    }
  },
  async mounted() {
    await this.getCustomerList()
  }
}
</script>
<style scoped lang="less">
.content {
  background-color: #fafafa;
  height: calc(100vh);
}
.text {
  font-size: 13px;
  color: #999;
  padding: 10px 15px;
}
.center {
  font-size: 15px;
  width: 335px;
  height: 30px;
  line-height: 30px;
  margin: 0 15px 15px 15px;
  background-color: #fff;
  padding: 15px 5px;
  border-radius: 4px;
}
.date {
  color: @c-color-primary;
}
.name {
  color: #333;
  margin-left: 20px;
  flex: 1;
}
.card {
  width: 70px;
  height: 30px;
  background-color: @c-color-primary;
  color: @c-color-primary;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  margin-left: 90px;
}
</style>
